<template>
	<div class="common-layout">
		<el-container>
			<el-aside width="220px" style="position: relative;">
				<el-affix :offset="5">
					<img src="@/assets/images/logo.png" alt="logo" width="200px" height="90x"
						style="margin-bottom: 10px;" />
					<el-menu default-active="4" active-text-color="#242424">
						<el-menu-item index="1">
							<svg-icon icon-class="home"></svg-icon>
							<span>首页</span>
						</el-menu-item>
						<el-menu-item index="2">
							<svg-icon icon-class="gc"></svg-icon>
							<span>广场案例</span>
						</el-menu-item>
						<el-menu-item index="3">
							<svg-icon icon-class="jc"></svg-icon>
							<span>选材中心</span>
						</el-menu-item>
						<el-menu-item index="4">
							<svg-icon icon-class="jj"></svg-icon>
							<span>家居产品</span>
						</el-menu-item>
						<el-sub-menu index="5">
							<template #title>
								<svg-icon icon-class="bz"></svg-icon>
								<span>岩板砖</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="5-1">
									<svg-icon icon-class="dz"></svg-icon>
									<span>定制</span>
								</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>
					</el-menu>
				</el-affix>
				<div class="user_box">
					<el-dropdown placement="top-start">
						<el-button class="userbtn"> <el-icon>
								<Avatar />
							</el-icon><span>个人中心</span></el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item><svg-icon icon-class="sc"></svg-icon> 我的收藏</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="xh"></svg-icon> 我的喜欢</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="xc"></svg-icon> 我的选材</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="sj"></svg-icon> 我的设计</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="gwc"></svg-icon> 购物车</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="dd"></svg-icon> 我的订单</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="set"></svg-icon> 账号设置</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</el-aside>
			<el-container>
				<el-header>
					<el-row style="width: 100%;">
						<el-col :span="12" :offset="4">
							<el-input class="search" v-model="search" style="width:100%; margin-top: 28px;"
								placeholder="搜索">
								<template #prefix>
									<el-icon>
										<Search />
									</el-icon>
								</template>
							</el-input>
						</el-col>
						<el-col :span="6" :offset="2">
							<div class="top_rlink">
								<el-link>帮助中心</el-link>
								<el-link>关于我们</el-link>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<el-main style="display: block; padding-top: 30px;">
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
						@select="handleSelect">
						<el-menu-item index="1">家居产品</el-menu-item>
						<el-sub-menu index="2">
							<template #title>岩板-亚马逊绿</template>
							<el-menu-item index="2-1">item one</el-menu-item>
							<el-menu-item index="2-2">item two</el-menu-item>
							<el-menu-item index="2-3">item three</el-menu-item>
						</el-sub-menu>
						<el-menu-item index="3">餐桌</el-menu-item>
						<el-menu-item index="4">长方形(直边安全角)</el-menu-item>
					</el-menu>
					<div class="product-info">
						<div class="media">
							<PicShow :images="picList" />
						</div>
					</div>
					<div class="product_box">
						<h2>亚马逊绿奢石长方形餐桌轻奢大理石长方形餐</h2>
						<p>亚马逊绿-餐桌-长方形</p>
						<h3><span class="red">¥6888</span><el-text class="gray" tag="del">¥7250</el-text><el-text
								class="dark">9折家装公司邀请码优惠价</el-text></h3>
						<div class="product_boxin clearfix">
							<div class="product_boxleft">配送</div>
							<div class="product_boxright">
								<el-text>30天内发货 送货入户并安装 广东佛山 至 </el-text>
								<el-popover placement="bottom" trigger="click" :width="490">
									<template #reference>
										<el-link :underline="false"><el-icon>
												<LocationFilled />
											</el-icon>湖北武汉市</el-link>
									</template>
									<div class="address">
										<el-radio-group v-model="radio3">
											<el-radio value="1" border>
												<h3>张三 180433529124</h3>
												<p>湖北省武汉市武昌区街道口某某某大厦1栋三单元1301室</p>
											</el-radio>
											<el-radio value="2" border>
												<h3>张三 180433529124</h3>
												<p>湖北省武汉市武昌区街道口某某某大厦1栋三单元1301室</p>
											</el-radio>
										</el-radio-group>
									</div>
								</el-popover>
							</div>
						</div>
						<div class="product_boxin clearfix">
							<div class="product_boxleft">尺寸</div>
							<div class="product_boxright">
								<el-radio-group v-model="radio1">
									<el-radio value="1" border>长130cm × 宽70cm × 高75cm</el-radio>
									<el-radio value="2" border>长140cm × 宽80cm × 高75cm</el-radio>
									<el-radio value="3" border>长160cm × 宽90cm × 高75cm</el-radio>
									<el-radio value="4" border>长180cm × 宽90cm × 高75cm</el-radio>
									<el-radio value="5" border>长200cm × 宽100cm × 高75cm</el-radio>
									<el-radio value="6" border>长220cm × 宽100cm × 高75cm</el-radio>
								</el-radio-group>
							</div>
						</div>
						<div class="product_boxin clearfix">
							<div class="product_boxleft">配件</div>
							<div class="product_boxright">
								<el-radio-group v-model="radio2">
									<el-row>
										<el-col :span="11">
											<el-radio value="1" border>不锈钢黑色U型腿</el-radio>
										</el-col>
										<el-col :span="11">
											<el-radio value="2" border>不锈钢小蛮腰底座腿</el-radio>
										</el-col>
										<el-col :span="11">
											<el-radio value="3" border>不锈钢白色V字腿</el-radio>
										</el-col>
										<el-col :span="11">
											<el-radio value="4" border>金属黑咖V字腿</el-radio>
										</el-col>
										<el-col :span="11">
											<el-radio value="5" border>实木凯旋门腿</el-radio>
										</el-col>
									</el-row>
								</el-radio-group>
							</div>
						</div>
						<div class="product_boxin clearfix">
							<div class="product_boxleft">保障</div>
							<div class="product_boxright">
								<el-row class="bz_box">
									<el-col :span='12'>
										<el-text>家居产品包邮</el-text><el-icon color="#e12509"><Select /></el-icon>
									</el-col>
									<el-col :span='12'>
										<el-text>先验后发</el-text><el-icon color="#e12509"><Select /></el-icon>
									</el-col>
									<el-col :span='12'>
										<el-text>100天保价</el-text><el-icon color="#e12509"><Select /></el-icon>
									</el-col>
									<el-col :span='12'>
										<el-text>货不对板包陪</el-text><el-icon color="#e12509"><Select /></el-icon>
									</el-col>
									<el-col :span='12'>
										<el-text>假一赔五</el-text><el-icon color="#e12509"><Select /></el-icon>
									</el-col>
									<el-col :span='12'>
										<el-text>破损包换</el-text><el-icon color="#e12509"><Select /></el-icon>
									</el-col>
								</el-row>
							</div>
						</div>
						<el-affix position="bottom" :offset="80">
							<div style="padding-left: 50px; padding-top: 20px;" class="clearfix">
								<el-input-number v-model="num" :min="0" size="large" @change="handleChange" />
								<el-button-group style="margin-left: 10px;">
									<el-button type="primary" size="large"><svg-icon
											icon-class="gwc"></svg-icon>加入购物车</el-button>
									<el-button type="primary" size="large"><el-icon>
											<Plus />
										</el-icon>立即购买</el-button>
								</el-button-group>
							</div>
						</el-affix>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
	<el-footer class="pagefooter">Footer</el-footer>
</template>

<script lang="ts" setup>
	import { ref, computed, onMounted, onUnmounted, reactive, watch } from 'vue'
	import { useRouter } from 'vue-router'
	import type { ImageProps, TabsPaneContext, ElCheckbox } from 'element-plus'
	import { LocationFilled } from '@element-plus/icons-vue'
	const checked2 = ref(false)
	const search = ref('')
	const activeIndex = ref('1')
	const radio1 = ref('1')
	const radio2 = ref('1')
	const radio3 = ref('1')

	const num = ref(1)
	const handleChange = (value : number | undefined) => {
		console.log(value)
	}
	const handleSelect = (key : string, keyPath : string[]) => {
		console.log(key, keyPath)
	}
	import PicShow from "@/components/picShow.vue";
	const picList = [
		'/src/assets/images/xq01.jpg',
		'/src/assets/images/xq02.jpg',
		'/src/assets/images/xq03.jpg',
		'/src/assets/images/xq04.jpg',
		'/src/assets/images/xq05.jpg',
		'/src/assets/images/xq01.jpg',
	]
	const clicked = ref(false)
	function onCancel() {
		clicked.value = true
	}
</script>

<style lang="scss">

</style>